<!--
 * @Author: ppzhang
 * @Date: 2022-02-10 10:39:46
 * @LastEditTime: 2024-01-12 11:52:12
 * @LastEditors: zhangweili zhang_weili@uxsino.com
 * @FilePath: /GZ-ITPS/CMS/src/views/cms/data-statistics/defect-relation.vue
-->
<template>
  <div class="data-defectrelation app-container">
    <ContentForm>
      <div slot="searchform" class="form-top">
        <!-- 搜索框 -->
        <filter-form :form="listQuery" :data="filterData" only-query @search="search(searchvaue)">
          <el-button class="refresh-btn" size="mini" type="primary" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
        </filter-form>

      </div>
      <div slot="valueform" class="value-form" style="padding-top:10px;">
        <div v-for="i in Object.keys(formdataNum).length" :key="i" class="item">
          <template v-if="formdataNum[i+'C'].records && (formdataNum[i+'C'].records).length">
            <div class="title">{{ (formdataNum[i+'C'].records)[0].cType }}缺陷</div>
            <div v-loading="loading" class="inner-form">
              <div class="imglist">
                <el-scrollbar style="height:100%;">
                  <viewer ref="viewer" :images="[(formdataNum[i+'C'].records)[0].imagePath]" @inited="inited">
                    <img v-if="(formdataNum[i+'C'].records)[0].imagePath" :src="(formdataNum[i+'C'].records)[0].imagePath" alt="">
                    <div v-else class="no-img">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline" />
                      </div>
                    </div>
                  </viewer>
                </el-scrollbar>
              </div>
              <table style="border-collapse:collapse" class="imgtabledesc">
                <tr>
                  <th class="thtitle">缺陷类型</th>
                  <td>
                    <span>{{ (formdataNum[i+'C'].records)[0].categoryName||"" }}</span>
                  </td>
                </tr>
                <tr>
                  <th class="thtitle">缺陷等级</th>
                  <td>{{ (formdataNum[i+'C'].records)[0].levelName||"" }}</td>
                </tr>
                <tr>
                  <th class="thtitle">检测日期</th>
                  <td>{{ showDate((formdataNum[i+'C'].records)[0].checkDate) }}</td>
                </tr>
                <tr>
                  <th class="thtitle">缺陷描述</th>
                  <td>
                    <span>{{ (formdataNum[i+'C'].records)[0].defectDescription||"" }}</span>
                  </td>
                </tr>
                <tr>
                  <th class="thtitle">状态</th>
                  <td>
                    <span>{{ (formdataNum[i+'C'].records)[0].status||"" }}</span>
                  </td>
                </tr>
              </table>
            </div>
            <div class="page-box">
              <el-pagination
                :page-size="1"
                layout="prev, pager, next, jumper"
                :current-page="listQuery.page"
                :total="formdataNum[i+'C'].total"
                @current-change="handleCurrentChange($event,i+'C')" />
            </div>
          </template>
          <template v-else>
            <div class="title">{{ i+'C' }}缺陷</div>
            <div v-loading="loading" class="inner-form">
              <div class="imglist">
                <el-scrollbar style="height:100%;">
                  <viewer ref="viewer" @inited="inited">
                    <div class="no-img">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline" />
                      </div>
                    </div>
                  </viewer>
                </el-scrollbar>
              </div>

              <table style="border-collapse:collapse" class="imgtabledesc">
                <tr>
                  <th class="thtitle">缺陷类型</th>
                  <td>
                    <span>{{ "" }}</span>
                  </td>
                </tr>
                <tr>
                  <th class="thtitle">缺陷等级</th>
                  <td>{{ "" }}</td>
                </tr>
                <tr>
                  <th class="thtitle">检测日期</th>
                  <td>{{ "" }}</td>
                </tr>
                <tr>
                  <th class="thtitle">缺陷描述</th>
                  <td>
                    <span>{{ "" }}</span>
                  </td>
                </tr>
                <tr>
                  <th class="thtitle">状态</th>
                  <td>
                    <span>{{ "" }}</span>
                  </td>
                </tr>
              </table>
            </div>
          </template>
        </div>
      </div>

    </ContentForm>
  </div>
</template>

<script>
// import { formatDate } from '@/utils/date.js'
// import { getToken } from '@/utils/auth'
import { parseTime } from '@/utils'
import { findManageUnitDeptList, getRailtypeList, getLineList, getSiteByLines, getDirectionList, getTrackList, getTunnelList, getPillarListPageRelation as getPillarListPage } from '@/api/platform'
// import { getListByTypeCode } from '@/api/cms/basic'
import { defectRelation } from '@/api/cms/Analysis-management/synthetical-Analysis/defectRelationAnalyse'
import ContentForm from '@/components/ContentForm'
export default {
  name: 'DefectRelation',
  components: {
    ContentForm
  },
  data() {
    return {
      loading: false,
      // 满足六个段接口请求标识
      unitDeptCode: '',
      formdataNum: {
        '1C': {},
        '2C': {},
        '3C': {},
        '4C': {}
      },
      filterData: {
        deptId: {
          width: 'auto',
          clearable: true,
          key: 'unitDeptCode',
          type: 'select',
          title: '单位',
          placeholder: '请选择单位',
          options: [],
          props: { label: 'deptName', value: 'deptNo' },
          changeFn: (vm) => {
            if (vm) {
              this.unitDeptCode = vm
              // this.filterData['railType'].options = []
              this.filterData['lineId'].options = []
              this.filterData['siteLines'].options = []
              this.filterData['directionId'].options = []
              this.filterData['trackId'].options = []
              this.filterData['tunnelId'].options = []
              this.listQuery = {
                unitDeptCode: vm,
                page: 1,
                size: 1,
                railType: 'PT',
                lineId: '',
                lineSiteId: '',
                cType: '',
                directionId: '',
                trackId: '',
                tunnelId: '',
                pillarId: '',
                pillarNum: ''
              }
              this.getList() // 加载下拉信息列表
            }
          }
        },
        // railType: {
        //   width: 'auto',
        //   clearable: true,
        //   key: 'railType',
        //   type: 'select',
        //   title: '线路类型',
        //   placeholder: '请选择线路类型',
        //   options: [],
        //   props: { label: 'text', value: 'code' },
        //   changeFn: (vm) => {
        //     this.listQuery.lineId = ''
        //     this.filterData['lineId'].options = []
        //     this.listQuery.lineSiteId = ''
        //     this.filterData['siteLines'].options = []
        //     this.listQuery.trackId = ''
        //     this.filterData['trackId'].options = []
        //     this.listQuery.tunnelId = ''
        //     this.filterData['tunnelId'].options = []
        //     if (vm !== '') {
        //       // 查询线路树信息列表
        //       getLineList({
        //         railType: vm,
        //         unitDeptCode: this.unitDeptCode
        //       }).then(response => {
        //         this.filterData['lineId'].options = response.data
        //       })
        //     } else {
        //       // 查询线路树信息列表
        //       getLineList({ unitDeptCode: this.unitDeptCode }).then(response => {
        //         this.filterData['lineId'].options = response.data
        //       })
        //     }
        //   }
        // },
        lineId: {
          width: 'auto',
          clearable: true,
          key: 'lineId',
          type: 'select',
          title: '线路',
          placeholder: '请选择线路',
          options: [],
          props: { label: 'seclineName', value: 'seclineId' },
          changeFn: (vm) => {
            this.listQuery.lineSiteId = ''
            this.filterData['siteLines'].options = []
            this.listQuery.trackId = ''
            this.filterData['trackId'].options = []
            this.listQuery.tunnelId = ''
            this.filterData['tunnelId'].options = []
            // 查询区间站场信息列表
            getSiteByLines({
              unitDeptCode: this.unitDeptCode,
              seclineId: vm
            }).then(response => {
              this.filterData['siteLines'].options = response.data
            })
          },
          clearFn: () => {
            this.listQuery.lineSiteId = ''
            this.filterData['siteLines'].options = []
            this.listQuery.trackId = ''
            this.filterData['trackId'].options = []
            this.listQuery.tunnelId = ''
            this.filterData['tunnelId'].options = []
          }
        },
        siteLines: {
          width: 'auto',
          clearable: true,
          key: 'lineSiteId',
          type: 'select',
          title: '区站',
          placeholder: '请选择区站',
          options: [],
          props: { label: 'siteName', value: 'siteId' },
          changeFn: (vm, node) => {
            this.listQuery.trackId = ''
            this.filterData['trackId'].options = []
            this.listQuery.tunnelId = ''
            this.filterData['tunnelId'].options = []
            this.listQuery.pillarId = ''
            this.listQuery.pillarNum = ''
            // 查询股道信息列表
            getTrackList({
              unitDeptCode: this.listQuery.unitDeptCode,
              siteId: vm
            }).then(response => {
              this.filterData['trackId'].options = response.data
              this.filterData['trackId'].options.unshift({ trackName: '非股道', trackId: 'NotTrack' })
            })
            // 查询隧道信息列表
            getTunnelList({
              unitDeptCode: this.listQuery.unitDeptCode,
              siteId: vm
            }).then(response => {
              this.filterData['tunnelId'].options = response.data
              this.filterData['tunnelId'].options.unshift({ tunnelName: '非隧道', tunnelId: 'NotTunnel' })
            })
            this.getPillarListPages()
          },
          clearFn: () => {
            this.listQuery.trackId = ''
            this.filterData01['trackId'].options = []
            this.listQuery.tunnelId = ''
            this.filterData02['tunnelId'].options = []
            this.listQuery.pillarId = ''
            this.listQuery.pillarNum = ''
            // this.filterData.pillarSelect.selectTableModel.filterForm.siteId = ''
            // this.filterData.pillarSelect.selectTableModel.filterForm.seclineId = ''
            // this.filterData.pillarSelect.selectTableModel.filterForm.unitDeptCode = ''
            // getPillarListPage({ page: 1, size: 10 }).then(response => {
            //   this.filterData.pillarSelect.options = response.data.records
            //   this.filterData.pillarSelect.selectTableModel.total = response.data.total
            // })
          }

        },
        directionId: {
          width: '160px',
          key: 'directionId',
          type: 'select',
          title: '行别',
          placeholder: '行别',
          options: [],
          props: {
            label: 'directionName',
            value: 'directionId'
          },
          changeFn: (vm, node) => {
            this.listQuery.pillarId = ''
            this.listQuery.pillarNum = ''
            this.getPillarListPages()
          }
        },
        trackId: {
          width: '160px',
          key: 'trackId',
          type: 'select',
          title: '股道',
          placeholder: '股道',
          options: [],
          props: { label: 'trackName', value: 'trackId' },
          changeFn: (vm, node) => {
            this.listQuery.pillarId = ''
            this.listQuery.pillarNum = ''
            this.getPillarListPages()
          }
        },
        tunnelId: {
          width: '160px',
          key: 'tunnelId',
          type: 'select',
          title: '隧道',
          placeholder: '隧道',
          options: [],
          props: { label: 'tunnelName', value: 'tunnelId' },
          changeFn: (vm, node) => {
            this.listQuery.pillarId = ''
            this.listQuery.pillarNum = ''
            this.getPillarListPages()
          }
        },
        pillarSelect: {
          width: '160px',
          key: 'pillarNum',
          type: 'selectTable',
          title: '支柱',
          placeholder: '请选择支柱',
          selectTableModel: {
            filterForm: {
              page: 1,
              size: 10,
              unitDeptCode: '',
              seclineId: '',
              siteId: '',
              directionId: '',
              trackId: '',
              tunnelId: '',
              pillarNum: ''
            },
            filterData: {
              keyWord: {
                key: 'pillarNum',
                type: 'input',
                placeholder: '支柱号'
              }
            },
            columns: [
              { property: 'pillarNum', label: '支柱号' },
              { property: 'pillarName', label: '支柱名称' }
            ],
            total: 0,
            filterFn: getPillarListPage
          },
          options: [],
          changeFn: (row) => {
            this.listQuery.pillarId = row.pillarId
            this.listQuery.pillarNum = row.pillarNum
          },
          clearFn: () => {
            this.listQuery.pillarId = ''
            this.listQuery.pillarNum = ''
          }
        }
      },
      // 查询列表请求参数
      listQuery: {
        page: 1,
        size: 1,
        unitDeptCode: '0130',
        railType: 'PT',
        lineId: 'AD3F8CF7E7BD425DA9E99F690762A020',
        lineSiteId: '',
        cType: '',
        directionId: '',
        trackId: '',
        tunnelId: '',
        pillarId: '22429334C2294A469E8766E94898F14B',
        pillarNum: '71#'
      },
      formdata1: {},
      formdata2: {},
      formdata3: {},
      formdata4: {},
      searchvaue: true
    }
  },
  watch: {
  },
  mounted() {
    this.search()
  },
  methods: {
    // 初始化
    initPage() {
      // 获取单位 deptList
      findManageUnitDeptList().then(response => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        if (resData.length !== 0) {
          this.filterData['deptId'].options = response.data
          this.unitDeptCode = response.data[1].deptNo
          this.listQuery.unitDeptCode = response.data[1].deptNo
        }
        if (this.$route.query.unitDeptCode) {
          this.listQuery.unitDeptCode = this.$route.query.unitDeptCode
          this.filterData['deptId'].changeFn(this.$route.query.unitDeptCode)
        }
        this.filterData['directionId'].options = []
        this.getList()
      })
    },
    getList() {
      // this.filterData['railType'].options = []
      this.filterData['lineId'].options = []
      this.filterData['directionId'].options = []
      // getRailtypeList().then(response => {
      //   this.filterData.railType.options = Object.freeze(response.data)
      // })
      // 查询线路树信息列表
      getLineList({ railType: 'PT', unitDeptCode: this.unitDeptCode }).then(response => {
        this.filterData['lineId'].options = response.data
      })
      // 查询行别信息列表
      getDirectionList({ unitDeptCode: this.listQuery.unitDeptCode }).then((response) => {
        this.filterData['directionId'].options = response.data
      })
    },
    getPillarListPages() {
      this.filterData.pillarSelect.selectTableModel.filterForm.siteId = this.listQuery.lineSiteId
      this.filterData.pillarSelect.selectTableModel.filterForm.seclineId = this.listQuery.lineId
      this.filterData.pillarSelect.selectTableModel.filterForm.unitDeptCode = this.listQuery.unitDeptCode
      this.filterData.pillarSelect.selectTableModel.filterForm.trackId = this.listQuery.trackId
      this.filterData.pillarSelect.selectTableModel.filterForm.tunnelId = this.listQuery.tunnelId
      this.filterData.pillarSelect.selectTableModel.filterForm.directionId = this.listQuery.directionId
      // todo 为了展示，将siteId写死了，展示接收去除
      getPillarListPage({ unitDeptCode: this.unitDeptCode, seclineId: this.listQuery.lineId, siteId: '1F68FA930A6849A19AB536FC40AC2F3A', directionId: this.listQuery.directionId, trackId: this.listQuery.trackId, tunnelId: this.listQuery.tunnelId, page: 1, size: 10 }).then(response => {
        this.filterData.pillarSelect.options = response.data.records
        this.filterData.pillarSelect.selectTableModel.total = response.data.total
      })
    },
    // 搜索
    async search(value) {
      if (this.listQuery.pillarNum === '') {
        if (value === true) {
          this.$alert('支柱号不能为空', '提示', {
            confirmButtonText: '确定'
          })
        }
      } else {
        this.loading = true
        const dictTypes = ['1C', '2C', '3C', '4C']
        // dictRequestList：存放字典请求的数组
        const dictRequestList = []
        // 列表查询
        dictTypes.forEach(item => {
          const obj4 = Object.assign({}, this.listQuery, { cType: item })
          dictRequestList.push(
            defectRelation(obj4).then(response => {
              this.loading = false
              switch (item) {
                case '1C':
                  this.formdata1 = response.data
                  this.formdata1.unshift({
                    key: '-1',
                    value: '全部'
                  })
                  break
                case '2C':
                  this.formdata2 = response.data
                  this.formdata2.unshift({
                    key: '-1',
                    value: '全部'
                  })
                  break
                case '3C':
                  this.formdata3 = response.data
                  this.formdata3.unshift({
                    key: '-1',
                    value: '全部'
                  })
                  break
                case '4C':
                  this.formdata4 = response.data
                  this.formdata4.unshift({
                    key: '-1',
                    value: '全部'
                  })
                  break
                default:
                  break
              }
            }).catch(_ => {
              this.loading = false
            })
          )
        })
        await Promise.allSettled(dictRequestList)
        this.queryTaskList()
      }
    },
    // 获取列表信息
    queryTaskList() {
      this.formdataNum = {
        '1C': Object.assign({}, this.formdata1),
        '2C': Object.assign({}, this.formdata2),
        '3C': Object.assign({}, this.formdata3),
        '4C': Object.assign({}, this.formdata4)
      }
    },
    resetSearch() { // 重置
      this.listQuery = {
        page: 1,
        size: 1,
        unitDeptCode: '',
        railType: 'PT',
        lineId: '',
        lineSiteId: '',
        cType: '',
        pillarId: '',
        pillarNum: ''
      }
      this.formdataNum = {
        '1C': {},
        '2C': {},
        '3C': {},
        '4C': {}
      }
    },
    handleCurrentChange(pagenum, num) {
      const obj2 = Object.assign({}, this.listQuery, { cType: num, page: pagenum })
      defectRelation(obj2).then(response => {
        this.formdataNum[num] = response.data
        // this.$nextTick(_ => {
        //   this.$set(this.formdataNum, num, response.data)
        // })
      }).catch(_ => {
        this.loading = false
      })
    },
    inited(viewer) {
      this.$viewer = viewer
    },
    showDate(value) {
      return parseTime(value, '{y}-{m}-{d}')
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.initPage()
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
    // 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(this, 'beforeRouteUpdate') // 当前组件实例
    console.log(to, '组件独享守卫beforeRouteUpdate第一个参数')
    console.log(from, '组件独享守beforeRouteUpdate卫第二个参数')
    console.log(next, '组件独享守beforeRouteUpdate卫第三个参数')
    next()
  }
}
</script>

<style scoped lang="scss">
.data-defectrelation{
  padding: 10px;
  background-color:transparent;
  height: 100%;
  .form-top{
    display: flex;
  }
  .form-top-p{
    color: #fff;
    float: left;
    margin-right: 10px  !important;
    font-size: 14px;
    margin-bottom: 10px;
    .input-long{
      width: 240px;
      .el-range__close-icon{
        line-height: 22px;
      }
    }
    .el-select  {
      width: 145px;
      .el-tag{
        max-width: 61%;
        overflow: hidden;
        padding: 0 4px;
        text-overflow: ellipsis;
      }
      .el-tag__close.el-icon-close {
        right: -3px;
      }
    }
    .el-input__inner {
      height: 28px;
      line-height: 28px;
    }
    .el-input__icon{
      line-height: 28px;
    }
    .el-icon-date,.el-range-separator{
      line-height: 22px;
    }
  }
  .value-form{
    display: flex;
    height: calc(100%);
    overflow: auto;
    flex-wrap: wrap;
    .item{
      position: relative;
      width: calc(50% - 10px);
      height: 280px;
      min-height:calc(50% - 15px);
      margin: 0 10px 10px 0;
      padding: 10px;
      box-shadow: 0 0 0.625rem 0.3125rem rgba(0,47,138,0.04);
      border-radius: 0.375rem;
      background-color: #fff;
      border:none;
      .inner-form{
        display: flex;
        justify-content:space-between;
        align-items:flex-start;
        padding: 10px;
          height: 80%;
        .imglist{
          white-space: nowrap;
          width: 58%;
          height: 100%;
          background: #eee;
          img{
            width: 100%;
          }
        .el-scrollbar__thumb, .el-scrollbar__thumb:hover{
          background-color:#aed0ea;
        }
      }

      .el-scrollbar__wrap {
        overflow: hidden;
        width: 100%;
      }
        .no-img{
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30px;
          color: #999;
          position: absolute;
           width: 100%;
        }
        .imgtabledesc{
          width: 38%;
          height: 100%;
        }
        .el-carousel{
          height: 100%;
          /deep/ .el-carousel__container{
            height: 100%!important;
          }
        }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
      }
      .page-box{
        display: flex;
        justify-content:center;
      }
      .title{
        text-align: left;
        padding:10px ;
        background: white;
        border: none;
      }
      table{
        width: 100%;
        table-layout:fixed;
      }

      table,td,th{
        font-size: 14px;
        color: black;
        text-align: left;
        font-weight: normal;
        border: solid 1px #eee;
        text-align: center;
        .thtitle{
          text-align: center;
          width: 90px;
          background-color: #F9F9FA;
        }
      }
      td{
        font-size: 14px;
        color: #666666;
      }
      td,th{
        white-space:nowrap;
        overflow:hidden;
        position: relative;
      }
    }
    .relitem{
      position: relative;
      border-left: solid 1px #EBEEF5;
      border-bottom: solid 1px #EBEEF5;
      width: calc(50%);
      height: 280px;
      min-height: 50%;
    }
    .radioList{
      display: flex;
      width: 100%;
      height: 32px;
      align-items: center;
      font-size: 14px;
      border-bottom: 1px solid #e2e2e2;
      color: #606266;
      .radioItem{
        padding-left: 10%;
        flex: 1;
      }
      .radioItemR{
        text-align: right;
        padding-right: 10%;
        flex: 1;
      }
    }
  }
  .value-form::-webkit-scrollbar:hover,
    .value-form::-webkit-scrollbar {
        width: 5px;
      }
      .value-form::-webkit-scrollbar-thumb,
      .value-form::-webkit-scrollbar-thumb:hover,
      .value-form::-webkit-scrollbar-thumb:active {
        background-color: #aed0ea;
      }
}
.el-loading-parent--relative{
  position: initial!important;
}
.empty{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      font-weight: bold;
      color: #394961;
    }
</style>
